<template>
  <div>
    <van-nav-bar title="购物车">
      <template #left>
        <van-icon size="18" name="arrow-left" @click="goback" />
      </template>
      <template #right>
        <van-icon @click="empty_buycar" name="delete-o" size="23" />
      </template>
    </van-nav-bar>
    <div class="content">
      <div v-if="control" class="buycar_list">
        <div class="buycar_yi">
          <van-cell value="863软件园" is-link>
            <template #title>
              <img class="donggan" src="@/assets/IMG/动感单车.png" alt="" />
              <span class="custom">外卖</span>
              <span type="danger" class="danger">送上门</span>
            </template>
          </van-cell>
        </div>
        <div
          class="buycar_list_content"
          v-for="(item, index) in food_info_list"
          :key="index"
        >
          <van-checkbox v-model="checked">
            <van-cell is-link>
              <template #title>
                <span class="custom-title">{{ tmp_name[index] }}</span>
              </template>
            </van-cell>
          </van-checkbox>
          <div class="shangping_div" @click="shangping_fn(index)">
            <div class="kouge"></div>
            <div class="shangping_tupian">
              <van-image :src="item.food_img" alt="" />
            </div>
            <div class="shangping_info">
              <div class="shangping_mingcheng">{{ item.food_name }}</div>
              <div class="shangping_xiangqing">{{ item.food_xiangqing }}</div>
              <div class="shangpingjiage">
                <div class="shangpingzhekoujia">
                  ￥{{ item.food_zhekoujia }}
                </div>
                <div class="shangpingyuanjia">{{ item.food_yuanjia }}</div>
                <div class="shangpingshuliang">
                  ×{{ food_quantity_list[index] }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <van-empty
      v-else
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        description="购物车什么也没有"
      />
    </div>
    <JiesuanFrame v-if="control" />
  </div>
</template>

<script>
import { Dialog, Toast } from "vant";
import JiesuanFrame from "../../../takeout/public_ commodity/jiesuan_frame.vue";
export default {
  name: "buy_car",
  data() {
    return {
      control: false,
      checked: true,
      user_id: "",
      buy_car_info: [],
      food_quantity_list: [],
      food_id_list: [],
      food_info_list: [],
      budiness_id_list: [],
      tmp_name: [],
    };
  },
  components: {
    JiesuanFrame,
  },
  mounted() {
    this.user_id = JSON.parse(localStorage.getItem("waimai")).user_id;
    this.axios.get("/get_user_all_buycar?a=" + this.user_id).then((res) => {
      if (res.data.data.length == 0) {
        this.control = false;
      } else {
        this.control = true;
        this.buy_car_info.push(res.data.data);
        console.log(this.buy_car_info[0]);
        this.buy_car_info[0].map((item) => {
          this.food_quantity_list.push(item.food_quantity);
          this.food_id_list.push(item.food_id);
          this.budiness_id_list.push(item.budiness_id);
        });
        this.food_id_list.map((item) => {
          this.axios.get("/get_food_info?a=" + item).then((res) => {
            this.food_info_list.push(res.data.data[0]);
          });
        });
      }
    });
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    shangping_fn(index) {
      this.$router.push({
        name: "shangjia",
        params: { shangjia_id: this.budiness_id_list[index] },
      });
    },
    empty_buycar() {
      if(this.food_info_list.length == 0) {
        Toast("已经很干净了")
        return
      }
      Dialog.confirm({
        title: "提示",
        message: "确定要清空购物车吗",
      })
        .then(() => {
          // on confirm
          this.axios
            .get("/clear_user_buycar?user_id=" + this.user_id)
            .then((res) => {
              if (res) this.food_info_list = [];
              this.control = false;
            });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style scoped>
.van-nav-bar {
  position: fixed;
  top: 0px;
  width: 100%;
}
.van-icon {
  color: black;
}

/deep/.van-nav-bar__content {
  background-color: rgb(231, 231, 231);
}

.van-empty {

  width: 95%;
  margin: 10px auto;
  border-radius: 5px;
}

.content {
  padding: 4px 13px;
  margin-top: 40px;
}

.buycar_list {
  background-color: white;
  border-radius: 20px;
  width: 100%;
  padding: 15px 0px;
}

.custom {
  font-size: 30px;
  line-height: 30px;
}

.danger {
  color: grey;
  margin-left: 10px;
}

.van-cell {
  padding: 0px 10px;
}

.buycar_list_content {
  overflow: scroll;
  padding: 0px 10px;
  /* border: 1px solid red; */
  margin-top: 20px;
}

/deep/.van-checkbox__icon--checked .van-icon {
  background-color: yellow;
  border: none;
  color: black;
}
.donggan {
  height: 30px;
  width: 30px;
}

.custom-title {
  height: 20px;
  font-size: 20px;
  line-height: 20px;
}
.shangping_div {
  display: flex;
  border-bottom: 1px solid rgb(185, 184, 184);
}
.kouge {
  flex: 0.5;
}
.shangping_tupian {
  flex: 3;
  padding: 10px 15px;
}
.shangping_info {
  flex: 3.5;
  display: flex;
  flex-direction: column;
  padding: 10px 0px;
}
.shangping_mingcheng {
  flex: 3;
  font-size: 18px;
  font-weight: bold;
}
.shangping_xiangqing {
  flex: 3;
  color: rgb(199, 194, 194);
  font-size: 13px;
}
.shangpingjiage {
  flex: 1;
  display: flex;
}
.shangpingzhekoujia {
  flex: 1;
  font-size: 20px;
  color: red;
  font-weight: bold;
  line-height: 30px;
}
.shangpingyuanjia {
  flex: 4;
  line-height: 32px;
  color: rgb(199, 194, 194);
  font-size: 13px;
  text-decoration: line-through;
}
.shangpingshuliang {
  flex: 1;
  line-height: 30px;
  text-align: right;
}
</style>